<template>
    <div class="zs-card zs-table-page-content">
        <hsTableV2 isMultistageHeader :columns="tableData.cloumns" :data="tableData.data" :expendList="expandedRowKeys"
            isTree fixed expandColumnKey="id" :multistageHeaderData="multistageData">
            <!-- <template #headerSlot="props">
            <CustomizedHeader v-bind="props" />
        </template> -->
        </hsTableV2>
        <!-- <div class="zs-text-gray-dark zs-text-sm zs-space-top">*整体数据包括基础物业1+商业物业+外拓物业+经营业务+香港顾问费。</div> -->
    </div>
</template>

<script setup lang="jsx">
// import { ref, reactive, computed, watch } from 'vue'
import { ref, reactive, watch } from 'vue'
// import detailApi from '@/api/Manage/Business/detailPages'
import { toThousands } from '@/utils/number-util'

const props = defineProps({
    tableList: {
        type: Array,
        required: true,
        default: () => { return [] }
    },
    yearmonth: {
        type: String,
        required: true,
        default: ''
    },
    isFresh: {
        type: String,
        required: true,
        default: ''
    }
})

let multistageData = {}
const initMultistageData = (yearmonth) => {
    const year = yearmonth.split('-')[0]
    let month = yearmonth.split('-')[1]
    month[0] == 0 ? month = month.substring(1, 2) : ''
    multistageData['multCol1'] = {
        key: 'multCol1',
        title: `${year}年${month}月`,
        childrenIndex: [2, 3, 4]
    }
    multistageData['multCol2'] = {
        key: 'multCol2',
        title: `${year}年1-${month}月`,
        childrenIndex: [5, 6, 7]
    }
    multistageData['multCol3'] = {
        key: 'multCol3',
        title: `${year}年度`,
        childrenIndex: [ 8, 9, 10, 11]
    }
}
const windowWidth = document.documentElement.scrollWidth;
let celWidth = (windowWidth - 138 - 300) / 10
celWidth = celWidth > 82 ? celWidth : 82
let tableData = reactive({
    loading: false,
    data: [],
    cloumns: [
        {
            key: "id",
            dataKey: "id",
            title: "序号",
            align: "left",
            width: 100,
        },
        {
            key: "subject_name",
            dataKey: "subject_name",
            title: "科目名称",
            width: 200,
            align: "left",
            indentKey: 'subject_level', // 设置缩进字段
            cellRenderer: ({ rowData }) => (
                <div style={{ display: 'flex' }}>
                    <div style={{ width: `${12 * (rowData.subject_level - 1)}px`, flexShrink: 0 }}></div>
                    <div>{rowData.subject_name}</div>
                </div>
            )
        },
        // 当前月份
        {
            key: "month_budget",
            dataKey: "month_budget",
            title: "预算收入/标准支出",
            align: "right",
            width: celWidth,
            parentKey: 'multCol1',
            headerCellRenderer:() => (
                <span>
                    <div>{ `预算收入/`}</div>
                    <div>{ `标准支出`}&nbsp;&nbsp;</div>
                </span>
            ),
            cellRenderer: ({ rowData }) => (
                // <ElTooltip content={toThousands(rowData.monthBudgetYuan)} placement="top">{toThousands(rowData.month_budget)}</ElTooltip>
                toThousands(rowData.month_budget)
            )
        },
        {
            key: "month_actual",
            dataKey: "month_actual",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol1',
            cellRenderer: ({ rowData }) => (
                // <ElTooltip content={toThousands(rowData.monthActualYuan)} placement="top">{toThousands(rowData.monthActual)}</ElTooltip>
                toThousands(rowData.month_actual)
            )
        },
        {
            key: "rate_proportion",
            dataKey: "rate_proportion",
            title: "完成率/占比",
            align: "right",
            width: celWidth,
            parentKey: 'multCol1',
            headerCellRenderer:() => (
                <span>
                    <div>{ `完成率/`}</div>
                    <div>{ `占比`}&nbsp;&nbsp;</div>
                </span>
            ),
            cellRenderer: ({ rowData }) => (
                <span class={rowData.rp_color_lab == 1 ? 'zs-text-red' : ''}>{rowData.rate_proportion}</span>
            )
        },
        // 1-当前月
        {
            key: "acc_month_budget",
            dataKey: "acc_month_budget",
            title: "预算收入/标准支出",
            align: "right",
            width: celWidth,
            parentKey: 'multCol2',
            headerCellRenderer:() => (
                <span>
                    <div>{ `预算收入/`}</div>
                    <div>{ `标准支出`}&nbsp;&nbsp;</div>
                </span>
            ),
            cellRenderer: ({ rowData }) => (
                toThousands(rowData.acc_month_budget)
            )
        },
        {
            key: "acc_month_actual",
            dataKey: "acc_month_actual",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol2',
            cellRenderer: ({ rowData }) => (
                toThousands(rowData.acc_month_actual)
            )
        },
        {
            key: "acc_rate_proportion",
            dataKey: "acc_rate_proportion",
            title: "完成率/占比",
            align: "right",
            width: celWidth,
            parentKey: 'multCol2',
            headerCellRenderer:() => (
                <span>
                    <div>{ `完成率/`}</div>
                    <div>{ `占比`}&nbsp;&nbsp;</div>
                </span>
            ),
            cellRenderer: ({ rowData }) => (
                <span class={rowData.acc_rp_color_lab == 1 ? 'zs-text-red' : ''}>{rowData.acc_rate_proportion}</span>
            )
        },
        // 本年度
        {
            key: "standard_ratio",
            dataKey: "standard_ratio",
            title: "标准比例",
            align: "right",
            width: celWidth,
            parentKey: 'multCol3',
            cellRenderer: ({ rowData }) => (
                toThousands(rowData.standard_ratio)
            )
        },
        {
            key: "year_budget",
            dataKey: "year_budget",
            title: "预算收入/标准支出",
            align: "right",
            width: celWidth,
            parentKey: 'multCol3',
            headerCellRenderer:() => (
                <span>
                    <div>{ `预算收入/`}</div>
                    <div>{ `标准支出`}&nbsp;&nbsp;</div>
                </span>
            ),
            cellRenderer: ({ rowData }) => (
                // <ElTooltip content={`${rowData.ratePeriod}`} placement="top"><span class={rowData.ratePeriodColorLab == 1 ? 'zs-text-red' : ''}>{rowData.ratePeriod}</span></ElTooltip>
                // <span class={rowData.ratePeriodColorLab == 1 ? 'zs-text-red' : ''}>{rowData.year_budget}</span>
                toThousands(rowData.year_budget)
            )
        },
        {
            key: "year_actual",
            dataKey: "year_actual",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol3',
            cellRenderer: ({ rowData }) => (
                toThousands(rowData.year_actual)
            )
        },
        {
            key: "year_rate_proportion",
            dataKey: "year_rate_proportion",
            title: "完成率/占比",
            align: "right",
            width: celWidth,
            parentKey: 'multCol3',
            headerCellRenderer:() => (
                <span>
                    <div>{ `完成率/`}</div>
                    <div>{ `占比`}&nbsp;&nbsp;</div>
                </span>
            ),
            cellRenderer: ({ rowData }) => (
                <span class={rowData.year_rp_color_lab == 1 ? 'zs-text-red' : ''}>{rowData.year_rate_proportion}</span>
            )
        },
        // {
        //     key: "budgetYear",
        //     dataKey: "budgetYear",
        //     title: "预测",
        //     align: "right",
        //     width: celWidth,
        //     parentKey: 'multCol3',
        //     cellRenderer: ({ rowData }) => (
        //         <ElTooltip content={toThousands(rowData.budgetYearYuan)} placement="top">{toThousands(rowData.budgetYear)}</ElTooltip>
        //     )
        // },
        // {
        //     key: "budgetYear",
        //     dataKey: "budgetYear",
        //     title: "完成率/占比",
        //     align: "right",
        //     width: celWidth,
        //     parentKey: 'multCol3',
        //     cellRenderer: ({ rowData }) => (
        //         <ElTooltip content={toThousands(rowData.budgetYearYuan)} placement="top">{toThousands(rowData.budgetYear)}</ElTooltip>
        //     )
        // },
    ],
})

// const biProjectCode = computed(() => {
//     return props.biProjectCode
// });
// const yearmonth = computed(() => {
//     return props.yearmonth
// });
// const isFresh = computed(() => {
//     return props.isFresh
// });
// watch([biProjectCode, yearmonth, isFresh], () => {
//     getList()
// }, { deep: true });

let expandedRowKeys = ref([])
const convertToFlatArray = (arr) => {
    arr.map(item => {
        // item.lastStage = item.subjectLevel != 1 && item.lastStage == 1 ? 1 : 0 // 设置:是否为最后一级 是末级 但不是第一级 变灰色
        item.lastStage = 0 // 设置:是否为最后一级 0 都改为否 不变色
        item.curParentIndex = item.id.split('.')[0] - 1 // 设置统一的第一级index， 用于斑马纹
        // item.subjectLevel == 1 || item.subjectLevel == 2 ? expandedRowKeys.value.push(item.id) : '' // 第一级 第二级 默认展开
        // item.subjectLevel == 1? expandedRowKeys.value.push(item.id) : '' // 第一级 默认展开
        if (Array.isArray(item.children)) {
            convertToFlatArray(item.children);
        }
        return item
    })
}

// const myEmits = defineEmits(['setDate']);
// const getList = () => {
//     tableData.loading = true
//     detailApi.budgetCardInfoApi({ biProjectCode: props.biProjectCode, formatType: props.type, yearmonth: props.yearmonth }).then((res) => {
//         if (res.data.code == 200) {
//             initMultistageData(res.data.data.dataTime)
//             convertToFlatArray(res.data.data.dataList)
//             tableData.data = res.data.data.dataList
//             tableData.loading = false
//             myEmits('setDate', res.data.data.dataTime);
//         }
//     })
// }
// getList()

const getList = () => {
    tableData.loading = true
    initMultistageData(props.yearmonth)
    convertToFlatArray(props.tableList)
    tableData.data = props.tableList
    tableData.loading = false
}

watch(() => { props.isFresh }, () => {
    getList()
}, { deep: true });

</script>

<style scoped lang="scss"></style>
